<script setup lang="ts">
import { ref } from 'vue'
import CustomNavbar from './componets/CustomNavbar.vue'
import CategoryPanel from './componets/CategoryPanel.vue'
import HotPanel from './componets/HotPanel.vue'
import Skeleton from './componets/Skeleton.vue'
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'

import type { XtxGuessInstance } from '@/types/components'

const swiperList = ref([])
const categoryPanelList = ref([])
const hotList = ref([])

// 获取猜你喜欢组件实例
const guessRef = ref<XtxGuessInstance>()

const getXtxSwiperRequest = async () => {
  const res = await getHomeBannerAPI()
  swiperList.value = res.result
}
const getCategoryPanelRequest = async () => {
  const res = await getHomeCategoryAPI()
  categoryPanelList.value = res.result
}
const getHomeHotRequest = async () => {
  const res = await getHomeHotAPI()
  hotList.value = res.result
}

const isLoading = ref(true)
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getXtxSwiperRequest(), getCategoryPanelRequest(), getHomeHotRequest()])
  isLoading.value = false
})

// 滚动触底事件
const onScrolltolower = (e: any) => {
  console.log('onScrolltolower', e)
  guessRef.value?.getMore()
}

// 下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢组件数据
  guessRef.value?.resetData() // 加载数据
  await Promise.all([getXtxSwiperRequest(), getCategoryPanelRequest(), getHomeHotRequest()]) // 关闭动画
  isTriggered.value = false
}
// 只有限制scroll- view的高度才能滚动
// const onScroll = (e: any) => {
//   console.log('scroll', e)
// }
// const onScrolltoupper = (e: any) => {
//   console.log('onScrolltoupper', e)
// }
</script>

<template>
  <CustomNavbar />
  <scroll-view
    refresher-enabled
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    class="scroll-view"
    scroll-y
  >
    <Skeleton v-if="isLoading" />
    <template>
      <XtxSwiper :list="swiperList" />
      <CategoryPanel :list="categoryPanelList" />
      <HotPanel :list="hotList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  .scroll-view {
    flex: 1;
  }
}
</style>
